<template>
  <div>
    <el-container class="ov-hidden full-height">
      <el-container>
        <PanelHeader ref="panelHeader" :data="params" :online="isOnline" :keyboard="inputEvent" @event="handleHeaderEvent"/>
        <!-- 主体信息 -->
        <el-main class="main-box no-padding">
          <div id="lumenChatPanel" class="talks-container lum-scrollbar" @scroll="talkPanelScroll($event)">
            <!-- 数据加载状态栏 -->
            <div class="loading-toolbar">
              <span v-if="loadRecord.status == 0" class="color-blue">
                <el-icon class="lumen-loading" size="15px" style="margin-top:-2px"><ele-Loading /></el-icon> 正在加载数据中...
              </span>
              <span v-else-if="loadRecord.status == 1" class="pointer color-blue" @click="loadChatRecords">
                <el-icon style="margin-top:-2px"><ele-Bottom /></el-icon> 查看更多消息...
              </span>
              <span v-else> 没有更多消息了... </span>
            </div>
            <!-- 消息主体 -->
            <div v-for="(item, idx) in records" :key="item.id">
              <!-- 消息时间 -->
              <div v-show="compareTime(idx, item.created_at)" class="datetime no-select">
                {{ sendTime(item.created_at) }}
                <!-- TO DO 判断 payOption &&  -->
                <el-button v-if="idx == (records.length - 1)" link type="primary" size="small" style="margin-left: 5px;font-size: 12px;" @click="handleFinishDialogue">结束对话</el-button>
              </div>
              <!-- 群消息 -->
              <div v-if="item.msg_type == 9" class="message-box">
                <invite-message @cat="catFriendDetail" :invite="item.invite" />
              </div>
              <!-- 撤回消息 -->
              <div v-else-if="item.is_revoke == 1" class="message-box">
                <revoke-message :item="item" />
              </div>
              <div v-else-if="item.msg_type == 0" class="message-box" :style="{minHeight: item.content ? '30px' : 'unset'}">
                <system-text-message v-if="item.content" :content="item.content" />
              </div>
              <!-- 其它对话消息 -->
              <div v-else class="message-box record-box" :class="{'direction-rt': item.float == 'right','checkbox-border': multiSelect.isOpen === true}">
                <aside v-show="multiSelect.isOpen" class="checkbox-column">
                    <el-icon size="18px" style="top:4px" :color="verifyMultiSelect(item.id) ? 'var(--el-color-primary)' : '#ccc'" @click="triggerMultiSelect(item.id)"><ele-SuccessFilled /></el-icon>
                </aside>
                <aside class="avatar-column">
                  <el-avatar class="pointer avatar" :size="30" :src="item.avatar" @click.prevent="catFriendDetail(item.user_id)">
                    <img :src="detaultAvatar" />
                  </el-avatar>
                </aside>
                <main class="main-column">
                  <div class="talk-title">
                    <span v-show="params.talk_type == 1 || (params.talk_type == 2 && item.float == 'right')" class="time">
                      <el-icon style="top:1px"><ele-Clock /></el-icon>
                      {{ parseTime(item.created_at, '{m}月{d}日 {h}:{i}') }}
                    </span>
                  </div>
                  <div class="talk-content">
                    <span v-show="params.talk_type == 2 && item.float == 'left'" class="nickname">
                      {{ item.friend_remarks || item.nickname }} |
                      {{ parseTime(item.created_at, '{m}月{d}日 {h}:{i}') }}
                    </span>
                    <!-- 文本消息 -->
                    <text-message
                      v-if="item.msg_type == 1"
                      :content="item.content"
                      :float="item.float"
                      :full-width="false"
                      :arrow="true"
                      @contextmenu.prevent="onCopy(idx, item, $event)"
                    />
                    <!-- 图片消息 -->
                    <image-message
                      v-else-if="item.msg_type == 2 && item.file.type == 1"
                      :src="item.file.url"
                      @contextmenu.prevent="onCopy(idx, item, $event)"
                    />
                    <!-- 音频文件预留 -->
                    <audio-message
                      v-else-if="item.msg_type == 2 && item.file.type == 2"
                      :src="item.file.url"
                      @contextmenu.prevent="onCopy(idx, item, $event)"
                    />
                    <!-- 视频文件预留 -->
                    <video-message
                      v-else-if="item.msg_type == 2 && item.file.type == 3"
                      :src="item.file.url"
                      @contextmenu.prevent="onCopy(idx, item, $event)"
                    />
                    <!-- 文件消息 -->
                    <file-message
                      v-else-if="item.msg_type == 2 && item.file.type == 4"
                      :file="item.file"
                      :record_id="item.id"
                      @contextmenu.prevent="onCopy(idx, item, $event)"
                    />
                    <!-- 会话记录消息 -->
                    <forward-message
                      v-else-if="item.msg_type == 3"
                      :forward="item.forward"
                      :record_id="item.id"
                      @contextmenu.prevent="onCopy(idx, item, $event)"
                    />
                    <!-- 代码块消息 -->
                    <code-message
                      v-else-if="item.msg_type == 4"
                      :code="item.code_block.code"
                      :lang="item.code_block.lang"
                      :maxwidth="true"
                      @contextmenu.prevent="onCopy(idx, item, $event)"
                    />

                    <!-- 商品文件预留 -->
                    <shop-message
                      v-else-if="item.msg_type == 10"
                      :dataBase="item"
                      @contextmenu.prevent="onCopy(idx, item, $event)"
                    />
                    <!-- 订单文件预留 -->
                    <order-message
                      v-else-if="item.msg_type == 11"
                      :dataBase="item"
                      @contextmenu.prevent="onCopy(idx, item, $event)"
                    />
                    <!-- 投票消息 -->
                    <vote-message
                      v-else-if="item.msg_type == 5"
                      :record_id="item.id"
                      :vote="item.vote"
                    />
                    <!-- 登录消息 -->
                    <login-message
                      v-else-if="item.msg_type == 8"
                      :detail="item.login"
                    />
                    <!-- 商品评价 -->
                    <comment-message :rate="item.evaluateInfo.rate" :record_id="item.id" v-else-if="item.msg_type == 13" :params="item.evaluateInfo" :readonly="item.evaluateInfo.id"></comment-message>
                    <!-- 支付消息 -->
                    <pay-message :params="item.confirmPriceInfo" v-else-if="item.msg_type == 14"></pay-message>
                    <!-- 未知消息 -->
                    <div class="unknown-msg" v-else>
                      未知消息类型[{{ item.msg_type }}]
                    </div>
                  </div>
                </main>
              </div>
            </div>
          </div>
          <!-- 置底按钮 -->
          <transition name="el-fade-in-linear">
            <div v-show="tipsBoard" class="tips-board pointer" @click="talkPanelScrollBottom">
              <el-icon><ele-CaretBottom /></el-icon>
              <span>回到底部</span>
            </div>
          </transition>
          <!-- 新消息气泡 -->
          <div v-show="tipsBoard && unreadMessage.num" class="talk-bubble pointer no-select" @click="talkPanelScrollBottom">
            <el-icon><ele-ChatDotRound /></el-icon>
            <span>新消息({{ unreadMessage.num }}条)</span>
            <span>&nbsp;#{{ unreadMessage.nickname }}#{{ unreadMessage.content }}</span>
          </div>
        </el-main>

        <!-- 页脚信息 -->
        <el-footer class="footer-box" height="160">
          <template v-if="multiSelect.isOpen === false">
            <MeEditor  :group-id="params.receiver_id" @send="submitSendMesage" @keyboard-event="onKeyboardEvent" :params="params"/>
          </template>
          <template v-else>
            <PanelToolbar v-model="multiSelect.items.length" @event="handleMultiMode"/>
          </template>
        </el-footer>
      </el-container>
      <!-- TO DO 条件判断 v-if="group.panel || hasCard" -->
      <el-aside width="350px" class="panel-aside">
        <!-- 群设置侧边栏 -->
        <!--  -->
        <!-- <GroupPanel
          v-if="group.panel && params.talk_type == 2 && params.talk_source == 1 && panelStatus===0"
          :params="params"
          :group-id="params.receiver_id"
          @close="hideChatGroup"
          @send-group="hideChatGroup"
          @quit-group="quitGroupSuccess"
          @disturb-change="disturbChange"
          @group-info="syncGroupInfo"
        /> -->
        <!-- 个人名片侧边栏 -->
        <!-- <UserPersonalCard
          v-else-if="params.talk_type == 1 && hasCard && params.talk_source == 1"
          :userId="params.receiver_id"
        /> -->
        <!-- 买家信息；咨询信息 侧边栏; 付费客户咨询页面的 右侧则无 
              params.customer == 1 && params.talk_source == 3 付费客户的咨询页面
        -->
        <!-- v-else-if="group.panel && params.talk_source != 1" -->
        <GroupCustomer
          :group-id="params.receiver_id"
          :talk-source="params.talk_source"
          :params="params"
        />
      </el-aside>
    </el-container>
    <!-- 消息管理器 -->
    <transition name="el-fade-in-linear">
      <TalkSearchRecord
        v-if="findChatRecord"
        :params="{
          talk_type: params.talk_type,
          receiver_id: params.receiver_id,
          title: params.nickname,
        }"
        @close="findChatRecord = false"
      />
    </transition>

    <!-- 群公告组件 -->
    <transition name="el-fade-in-linear">
      <GroupNotice
        v-if="group.notice"
        :group-id="params.receiver_id"
        @close="group.notice = false"
      />
    </transition>
    <user-card-detail v-model:show="showUserDetail" :user_id="user_id"></user-card-detail>
    <user-contacts v-model:show="showContacts" @confirm="contactConfirm"></user-contacts>
    <pay-editor v-model:showEditor="showEditor" :params="payMessage"></pay-editor>
  </div>
</template>

<script>
import { ElNotification } from 'element-plus'
import { reactive, toRefs, watch, onMounted, computed, nextTick, ref } from 'vue'
import ContextMenu from '@imengyu/vue3-context-menu'
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
import PanelHeader from '/@/views/chat/components/PanelHeader.vue'
import PanelToolbar from '/@/views/chat/components/PanelToolbar.vue'
import GroupPanel from '/@/views/chat/components/GroupPanel.vue'
import GroupNotice from '/@/views/chat/components/group/GroupNotice.vue'
import TalkSearchRecord from '/@/views/chat/components/TalkSearchRecord.vue'
import MeEditor from '/@/views/chat/components/editor/MeEditor.vue'
import UserPersonalCard from '/@/views/chat/components/user/UserPersonalCard.vue'
import GroupCustomer from '/@/views/chat/components/group/GroupCustomer.vue'
import PayEditor from '/@/views/chat/components/editor/PayEditor.vue'

import SocketGpt from '/@/views/chat/im-server/socket-instance.js'

import { formateTime, parseTime, copyTextToClipboard } from '/@/views/chat/utils/functions.js'
import { useDialogueInfo } from '/@/stores/chat/dialogue'
import { useChatTalk } from '/@/stores/chat/talk'
import { useChatNotify } from '/@/stores/chat/notify'
import { useUserInfo } from '/@/stores/userInfo'
import { useChatApi } from '/@/api/chat/index'
import { getCardDetail } from '/@/api/sys/card/index'

import detaultAvatar from '/@/assets/detault-avatar.jpg'

export default {
    name: 'TalkPanel',
    props: {
        params: {
            type: Object,
            default: () => {
                return {
                    // 消息来源（1：好友私信 2:群聊）
                    talk_type: 0,
                    // 消息接收者ID（好友ID或者群聊ID）
                    receiver_id: 0,
                    nickname: '',
                    // 消息类型 (1: 17聊 2: 商城咨询客服 3: 付费客服)
                    talk_source: 0
                }
            },
        },
        // 用户是否在线
        isOnline: {
            type: Boolean,
            default: false,
        }
    },
    components: {
        PanelHeader,
        PanelToolbar,
        GroupPanel,
        GroupNotice,
        TalkSearchRecord,
        MeEditor,
        UserPersonalCard,
        GroupCustomer,
        PayEditor
    },
    setup(props, context) {
        const { params } = toRefs(props)
        const panelHeader = ref()
        const dialogueInfo = useDialogueInfo()
        const chatTalk = useChatTalk()
        const chatNotify = useChatNotify()
        const chatApi = useChatApi()
        const userInfo = useUserInfo()
        const state = reactive({
            // 记录加载相关参数
            loadRecord: {
                status: 0,
                minRecord: 0,
            },
            // 多选相关操作
            multiSelect: {
                isOpen: false,
                items: [],
                mode: 0,
            },
            // 群组Box
            group: {
                panel: false,
                notice: false,
            },
            // 键盘输入事件
            keyboardEvent: {
                isShow: false,
                time: 0,
            },
            // 聊天记录管理器数据
            findChatRecord: false,
            // 置底按钮是否显示
            tipsBoard: false,
            // 用户卡片
            showUserDetail: false,
            user_id: null,
            showContacts: false,
            hasCard: false,
            panelStatus:0,
            showEditor: false,
            payMessage: {}, // TO DO 支付的信息
        })
        // store 数据
        const uid = computed(() => {
            return userInfo.websocketInfos.uid
        })
        const index_name = computed(() => {
            return dialogueInfo.index_name
        })
        const unreadMessage = computed(() => {
            return chatTalk.unreadMessage
        })
        const inputEvent = computed(() => {
            return chatNotify.inputEvent
        })
        const records = computed(() => {
            return dialogueInfo.records
        })
        const sendTime = formateTime;
        const payOption = computed(() => {
          return params.value.talk_source == 3
        })
         // 处理 Header 组件事件
        const handleHeaderEvent = (event_name) => {
            switch (event_name) {
                case 'history': // 历史记录
                    state.findChatRecord = true
                    break;
                case 'notice': // 公告
                    state.group.notice = true
                    break;
                case 'setting': // 群设置
                    state.group.panel = !state.group.panel
                    break;
            }
        }
        // 回车键发送消息回调事件
        const submitSendMesage = (content) => {
            chatApi.ServeSendTalkText({
                receiver_id: parseInt(params.value.receiver_id),
                talk_type: parseInt(params.value.talk_type),
                text: content,
                talkSource: params.value.talk_source
            }).then(() => {
                chatTalk.UPDATE_TALK_ITEM({
                    index_name: index_name.value,
                    draft_text: '',
                })
            })
        }
        // 推送编辑事件消息
        const onKeyboardEvent = (text) => {
            chatTalk.UPDATE_TALK_ITEM({
                index_name: index_name.value,
                draft_text: text,
            })
            // 判断当前对话是否属于私聊信息
            if (params.value.talk_type == 2 || !state.isOnline) return

            let time = new Date().getTime()
            // 判断在两秒内是否已推送事件
            if (state.keyboardEvent.time != 0 && time - state.keyboardEvent.time < 2000)
                return

            state.keyboardEvent.time = time

            // 调用父类Websocket组件发送消息
            SocketGpt.emit('event_talk_keyboard', {
                sender_id: parseInt(uid),
                receiver_id: parseInt(params.value.receiver_id),
            })
        }
        // 加载用户聊天详情信息
        const loadChatRecords = () => {
            const user_id = uid.value
            const data = {
                record_id: state.loadRecord.minRecord,
                receiver_id: params.value.receiver_id,
                talk_type: params.value.talk_type,
                limit: 30,
            }
            state.loadRecord.status = 0
            let el = document.getElementById('lumenChatPanel')
            let scrollHeight = el.scrollHeight
            chatApi.ServeTalkRecords(data).then(res => {
                // 防止点击切换过快消息返回延迟，导致信息错误
                if (data.receiver_id != params.value.receiver_id && data.talk_type != params.value.talk_type) {
                    return
                }
                const records = res.data.rows.map(item => {
                    item.float = 'center'
                    if (item.user_id > 0) {
                        item.float = item.user_id == user_id ? 'right' : 'left'
                    }
                    return item
                })
                // 判断是否是初次加载
                if (data.record_id == 0) {
                    dialogueInfo.SET_DIALOGUE([])
                }
                dialogueInfo.UNSHIFT_DIALOGUE(records.reverse())
                state.loadRecord.status = records.length >= res.data.limit ? 1 : 2
                state.loadRecord.minRecord = res.data.record_id
                nextTick(() => {
                    if (data.record_id == 0) {
                        el.scrollTop = el.scrollHeight
                    } else {
                        el.scrollTop = el.scrollHeight - scrollHeight
                    }
                })
            }).catch(() => {
                state.loadRecord.status = 1
            })
        }
        // 多选处理方式
        const handleMultiMode = (value) => {
          if (value == 'close') {
            closeMultiSelect()
            return false
          }
          if (state.multiSelect.items.length < 1) {
            return false
          }
          if (value == 'forward' || value == 'merge_forward') {
            state.multiSelect.mode = value == 'forward' ? 1 : 2
            if (verifyMultiSelectType(3)) {
              ElNotification({
                title: '消息转发',
                message: '会话记录不支持合并转发',
              })
              return false
            }
            state.showContacts = !state.showContacts
            return false
          }
          if (value == 'delete') {
            state.multiSelect.mode = 3
            // 批量删除
            let ids = state.multiSelect.items
            chatApi.ServeRemoveRecords({
              talk_type: params.value.talk_type,
              receiver_id: params.value.receiver_id,
              record_id: ids.join(','),
            }).then(res => {
              if (res.code == 0) {
                delRecords(ids)
                closeMultiSelect()
              }
            })
          }
        }
        const contactConfirm = (data) => {
          confirmSelectContacts(data)
        }
        // 确认消息转发联系人事件
        const confirmSelectContacts = (data) => {
            let user_ids = []
            let group_ids = []
            data.forEach(item => {
                if (item.type == 1) {
                    user_ids.push(item.id)
                } else {
                    group_ids.push(item.id)
                }
            })
            chatApi.ServeForwardRecords({
                forward_mode: state.multiSelect.mode,
                talk_type: parseInt(params.value.talk_type),
                receiver_id: parseInt(params.value.receiver_id),
                records_ids: state.multiSelect.items.join(','),
                receive_user_ids: user_ids.join(','),
                receive_group_ids: group_ids.join(','),
            }).then(() => {
                closeMultiSelect()
                ElNotification({
                    title: '消息转发',
                    message: '消息转发成功...',
                    type: 'success',
                })
            })
        }
        // 处理消息时间是否显示
        const compareTime = (index, datetime) => {
            if (datetime == undefined) {
                return false
            }
            if (records.value[index].is_revoke == 1) {
                return false
            }
            datetime = datetime.replace(/-/g, '/')
            let time = Math.floor(Date.parse(datetime) / 1000)
            let currTime = Math.floor(new Date().getTime() / 1000)
            // 当前时间5分钟内时间不显示
            if (currTime - time < 300) return false
            // 判断是否是最后一条消息,最后一条消息默认显示时间
            if (index == records.value.length - 1) {
                return true
            }
            let nextDate = records.value[index + 1].created_at.replace(/-/g, '/')
            return !(
                parseTime(new Date(datetime), '{y}-{m}-{d} {h}:{i}') ==
                parseTime(new Date(nextDate), '{y}-{m}-{d} {h}:{i}')
            )
        }
        // 查看好友用户信息
        const catFriendDetail = (value) => {
            state.user_id = value
            state.showUserDetail = true
        }
        // 撤回消息
        const revokeRecords = (index, item) => {
            chatApi.ServeRevokeRecords({
                record_id: item.id,
            }).then(res => {
                if (res.code == 0) {
                    dialogueInfo.UPDATE_DIALOGUE({ id: item.id, is_revoke: 1 })
                }
            })
        }
        // 删除消息
        const removeRecords = (index, item) => {
            let receiver_id = item.receiver_id
            if (item.talk_type == 1 && item.user_id != uid.value) {
                receiver_id = item.user_id
            }
            chatApi.ServeRemoveRecords({
                talk_type: item.talk_type,
                receiver_id: receiver_id,
                record_id: item.id.toString(),
            }).then(res => {
                if (res.code == 0) {
                    dialogueInfo.DELETE_DIALOGUE(index)
                }
            })
        }
        // 转发消息
        const forwardRecords = () => {
            // ElNotification({
            //     title: '温馨提示',
            //     message: '单条记录转发开发中...',
            // })
          state.showContacts = !state.showContacts
        }
        // 从列表中删除记录
        const delRecords = (arr) => {
            dialogueInfo.BATCH_DELETE_DIALOGUE(arr)
        }
        // 开启多选模式
        const openMultiSelect = () => {
            state.multiSelect.isOpen = true
        }
        // 关闭多选模式
        const closeMultiSelect = () => {
            state.showContacts = false
            state.multiSelect.isOpen = false
            state.multiSelect.items = []
        }
        // 判断记录是否选中
        const verifyMultiSelect = (records_id) => {
            return state.multiSelect.items.indexOf(records_id) >= 0
        }
        // 触发多选事件
        const triggerMultiSelect = (records_id) => {
            let i = state.multiSelect.items.indexOf(records_id)
            if (i >= 0) {
                state.multiSelect.items.splice(i, 1)
            } else {
                if (state.multiSelect.items.length >= 30) {
                    ElNotification({
                        title: '温馨提示',
                        message: '批量操作最大支持30条数据...',
                    })
                    return false
                }
                state.multiSelect.items.push(records_id)
            }
        }
        // 验证是否存在选择的指定类型的消息
        const verifyMultiSelectType = (type) => {
            return records.value.some(item => {
                return verifyMultiSelect(item.id) && item.msg_type == type
            })
        }
        // 消息点击右键触发自定义菜单
        const onCopy = (idx, item, event) => {
            event.preventDefault()
            let menus = []
            let content = ''
            if (document.getElementById('copy_class_' + item.id)) {
                content = document.getElementById('copy_class_' + item.id).innerText
            }
            if (content) {
                menus.push({
                    label: '复制',
                    customClass: 'cus-contextmenu-item',
                    onClick: () => {
                        copyTextToClipboard(content)
                    },
                })
            }
            if (item.user_id == uid.value) {
                let time = new Date().getTime() - Date.parse(item.created_at.replace(/-/g, '/'))
                if (Math.floor(time / 1000 / 60) < 2) {
                    menus.push({
                        label: '撤回',
                        customClass: 'cus-contextmenu-item',
                        onClick: () => {
                            revokeRecords(idx, item)
                        },
                    })
                }
            }
            menus.push({
                label: '删除',
                customClass: 'cus-contextmenu-item',
                onClick: () => {
                    removeRecords(idx, item)
                },
            })
            menus.push({
                label: '转发',
                customClass: 'cus-contextmenu-item',
                onClick: () => {
                    forwardRecords(idx, item)
                },
            })
            // menus.push({
            //     label: '引用',
            //     customClass: 'cus-contextmenu-item',
            //     onClick: () => {},
            // })
            menus.push({
                label: '多选',
                customClass: 'cus-contextmenu-item',
                onClick: () => {
                    openMultiSelect()
                },
            })
            ContextMenu.showContextMenu({
              x: event.x,
              y: event.y,
              items: menus,
              customClass: 'cus-contextmenu',
              minWidth: 120
            })
            closeMultiSelect()
        }
        const hideChatGroup = () => {
            state.group.panel = false
        }
        // 修改群聊免打扰状态
        const disturbChange = (detail) => {
            chatTalk.UPDATE_TALK_ITEM({
                index_name: `2_${params.value.receiver_id}`,
                is_disturb: parseInt(detail.status)
            })
        }
        // 退出群聊回调事件
        const quitGroupSuccess = () => {
            context.emit('close-talk', '')
        }
        // 同步群信息
        const syncGroupInfo = (groupInfo) => {
            panelHeader.value.setGroupNum(groupInfo.members_num)
        }
        // 对话面板滚动事件
        const talkPanelScroll = (e) => {
            if (e.target.scrollTop == 0 && state.loadRecord.status == 1) {
                loadChatRecords()
                return
            }
            const height = e.target.scrollTop + e.target.clientHeight + 5
            state.tipsBoard = height < e.target.scrollHeight
            if (state.tipsBoard == false && unreadMessage.value.num > 0) {
                chatTalk.CLEAR_TLAK_UNREAD_MESSAGE()
            }
        }
        // 聊天版本滚动到底部
        const talkPanelScrollBottom = () => {
            let el = document.getElementById('lumenChatPanel')
            el.scrollTop = el.scrollHeight
        }
        // 获取名片列表
        const loadList = () => {
          getCardDetail({
            cardUserId: params.value.receiver_id
          }).then(res => {
            state.hasCard = res.data.length > 0
          })
        }
        // 结束对话
        const handleFinishDialogue = () => {
          // TO DO 发送金币扣币消息
          state.showEditor = true
        }
        watch(() => params.value,
            () => {
                state.loadRecord.minRecord = 0
                state.tipsBoard = false
                state.multiSelect = {
                    isOpen: false,
                    items: [],
                    mode: 0,
                }
                loadChatRecords()
                if(params.value.talk_type == 1) {
                  // 私聊
                  loadList()
                  state.group.panel = false
                }else{
                  state.group.panel = true
                }
            }
        )
        onMounted(() => {
            loadChatRecords()
            if(params.value.talk_type == 1) {
              // 私聊
              loadList()
              state.group.panel = false
            }else{
              state.group.panel = true
            }
        })
        return {
            ...toRefs(state),
            panelHeader,
            talkPanelScrollBottom,
            talkPanelScroll,
            syncGroupInfo,
            quitGroupSuccess,
            disturbChange,
            hideChatGroup,
            onCopy,
            verifyMultiSelectType,
            triggerMultiSelect,
            verifyMultiSelect,
            closeMultiSelect,
            openMultiSelect,
            delRecords,
            forwardRecords,
            removeRecords,
            revokeRecords,
            catFriendDetail,
            compareTime,
            confirmSelectContacts,
            handleMultiMode,
            loadChatRecords,
            onKeyboardEvent,
            submitSendMesage,
            handleHeaderEvent,
            sendTime,
            parseTime,
            unreadMessage,
            index_name,
            inputEvent,
            records,
            detaultAvatar,
            contactConfirm,
            params,
            payOption,
            handleFinishDialogue
        }
    }
}
</script>

<style lang="scss" scoped>
.ov-hidden{
    background: var(--next-color-white);
}
.main-box {
  position: relative;
}

.panel-aside {
  border-left: 1px solid #f5eeee;
}

/* 面板页脚 */
.footer-box {
  height: 160px !important;
  padding: 0;
}

.tips-board {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 20px;
  height: 30px;
  width: 100px;
  border-radius: 20px;
  font-size: 12px;
  background-color: #fff;
  box-shadow: 0 2.5px 10px 0 rgba(31, 35, 41, 0.1);
  color: #1f2329;

  span {
    margin-left: 5px;
    margin-top: -2px;
  }

  .svg {
    width: 10px;
    height: 10px;
    color: black;
  }
}

.talk-bubble {
  position: absolute;
  left: 0px;
  bottom: 20px;
  max-width: 300px;
  height: 40px;
  line-height: 40px;
  border-radius: 0 20px 20px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: white;
  padding: 0 15px 0 30px;
  font-size: 13px;
  background: var(--el-color-primary);

  i {
    font-size: 22px;
    position: absolute;
    left: 5px;
    top: 9px;
  }
}

.talks-container {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 5px 30px 10px;
  overflow-y: auto;

  .message-box {
    width: 100%;
    min-height: 30px;
    margin-bottom: 5px;
  }

  .loading-toolbar {
    height: 30px;
    line-height: 30px;
    margin: 5px 0;
    text-align: center;
    user-select: none;
    font-size: 13px;
    color: #cec4c4;

    .color-blue {
      color: var(--el-color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .datetime {
    height: 30px;
    line-height: 30px;
    color: #ccc9c9;
    font-size: 12px;
    text-align: center;
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .record-box {
    display: flex;
    flex-direction: row;
    transition: 0.5s ease;

    .checkbox-column {
      display: flex;
      justify-content: center;
      flex-basis: 40px;
      flex-shrink: 0;
      order: 1;
      user-select: none;
      padding-top: 25px;

      i {
        &.selected {
          color: var(--el-color-primary) !important;
        }
      }
    }

    .avatar-column {
      width: 40px;
      flex-basis: 40px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      order: 2;
      user-select: none;
      padding-top: 22px;
      flex-direction: column;
      .avatar{
        color: white;
        font-size: 14px;
        cursor: pointer;
      }
    }

    .main-column {
      flex: 1 auto;
      order: 3;
      position: relative;
      box-sizing: border-box;
      padding: 5px;
      overflow: hidden;

      .talk-title {
        display: flex;
        align-items: center;
        height: 15px;
        margin-bottom: 2px;
        font-size: 10px;
        user-select: none;
        color: #a7a0a0;
        opacity: 0;
        transition: 0.5s ease;

        &.show {
          opacity: 1 !important;
        }

        span {
          transform: scale(0.9);
        }
      }

      .talk-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-sizing: border-box;
        width: 100%;

        .nickname {
          font-size: 12px;
          color: #a7a0a0;
          margin: -4px 0 4px -8px;
          transform: scale(0.9);
        }
      }

      &:hover {
        .talk-title {
          opacity: 1;
        }
      }
    }

    &.direction-rt {
      .avatar-column {
        order: 3;
      }

      .main-column {
        order: 2;

        .talk-title {
          justify-content: flex-end;
        }

        .talk-content {
          align-items: flex-end;
        }
      }
    }

    &.checkbox-border {
      // border: 1px dashed #c4c4ec;
      border-radius: 4px;
      &:hover {
        background: var(--el-fill-color-light);
        cursor: pointer;
      }
    }
  }
}

.lum-scrollbar::-webkit-scrollbar {
  background-color: #ffffff;
}
::-webkit-scrollbar-track-piece {
  background: var(--next-color-white);
}
</style>
